<template>
  <DynamicForm
    ref="dynamicFormRef"
    v-model="formData"
    :form-config="formConfig"
    label-width="82px"
    :gutter="20"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type {
  FormItemConfig,
  DynamicFormInstance
} from "@/components/DynamicForm/types";
import { type FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    code: "",
    remark: ""
  })
});

const dynamicFormRef = ref<DynamicFormInstance>();
const formData = ref(props.formInline);

// 动态表单配置
const formConfig: FormItemConfig[] = [
  {
    key: "name",
    name: "角色名称",
    type: "input",
    required: true,
    placeholder: "请输入角色名称",
    col: { xs: 24 }
  },
  {
    key: "code",
    name: "角色标识",
    type: "input",
    required: true,
    placeholder: "请输入角色标识",
    rules: [
      {
        pattern: /^[a-zA-Z0-9_-]+$/,
        message: "角色标识只能包含字母、数字、下划线和横线",
        trigger: "blur"
      }
    ],
    col: { xs: 24 }
  },
  {
    key: "remark",
    name: "备注",
    type: "textarea",
    placeholder: "请输入备注信息",
    params: {
      rows: 3
    },
    col: { xs: 24 }
  }
];

function getRef() {
  return dynamicFormRef.value;
}

defineExpose({ getRef });
</script>
